<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简单射击游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script>
        // 获取画布和绘图上下文
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');

        // 颜色定义
        const WHITE = '#ffffff';
        const BLACK = '#000000';
        const RED = '#ff0000';

        // 初始化分数
        let score;

        // 玩家飞船类
        class Player {
            constructor() {
                this.width = 50;
                this.height = 50;
                this.x = (canvas.width - this.width) / 2;
                this.y = canvas.height - this.height - 10;
                this.speed = 5;
            }

            update(keys) {
                if (keys[37] && this.x > 0) {
                    this.x -= this.speed;
                }
                if (keys[39] && this.x < canvas.width - this.width) {
                    this.x += this.speed;
                }
            }

            shoot() {
                const bullet = new Bullet(this.x + this.width / 2, this.y);
                bullets.push(bullet);
            }

            draw() {
                ctx.fillStyle = WHITE;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }

        // 子弹类
        class Bullet {
            constructor(x, y) {
                this.width = 5;
                this.height = 10;
                this.x = x - this.width / 2;
                this.y = y;
                this.speed = 8;
            }

            update() {
                this.y -= this.speed;
            }

            draw() {
                ctx.fillStyle = RED;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }

        // 敌人类
        class Enemy {
            constructor() {
                this.width = 30;
                this.height = 30;
                this.x = Math.random() * (canvas.width - this.width);
                this.y = Math.random() * (-100) - 40;
                this.speed = Math.floor(Math.random() * 3) + 1;
            }

            update() {
                this.y += this.speed;
                if (this.y > canvas.height) {
                    this.x = Math.random() * (canvas.width - this.width);
                    this.y = Math.random() * (-100) - 40;
                    this.speed = Math.floor(Math.random() * 3) + 1;
                }
            }

            draw() {
                ctx.fillStyle = RED;
                ctx.fillRect(this.x, this.y, this.width, this.height);
            }
        }

        // 创建玩家
        let player;

        // 创建子弹和敌人数组
        let bullets;
        let enemies;

        // 处理按键事件
        const keys = {};
        window.addEventListener('keydown', function (event) {
            keys[event.keyCode] = true;
            if (event.keyCode === 32) {
                player.shoot();
            }
        });
        window.addEventListener('keyup', function (event) {
            keys[event.keyCode] = false;
        });

        // 检查碰撞
        function checkCollision(rect1, rect2) {
            return (
                rect1.x < rect2.x + rect2.width &&
                rect1.x + rect1.width > rect2.x &&
                rect1.y < rect2.y + rect2.height &&
                rect1.y + rect1.height > rect2.y
            );
        }

        // 初始化游戏
        function initGame() {
            score = 0;
            player = new Player();
            bullets = [];
            enemies = [];

            // 创建敌人
            for (let i = 0; i < 5; i++) {
                const enemy = new Enemy();
                enemies.push(enemy);
            }
        }

        // 游戏主循环
        function gameLoop() {
            // 清除画布
            ctx.fillStyle = BLACK;
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            // 更新玩家
            player.update(keys);
            player.draw();

            // 更新子弹
            for (let i = bullets.length - 1; i >= 0; i--) {
                const bullet = bullets[i];
                bullet.update();
                bullet.draw();
                if (bullet.y < 0) {
                    bullets.splice(i, 1);
                }
            }

            // 更新敌人
            for (let i = 0; i < enemies.length; i++) {
                const enemy = enemies[i];
                enemy.update();
                enemy.draw();

                // 检查子弹是否击中敌人
                for (let j = bullets.length - 1; j >= 0; j--) {
                    const bullet = bullets[j];
                    if (checkCollision(bullet, enemy)) {
                        bullets.splice(j, 1);
                        enemies.splice(i, 1);
                        const newEnemy = new Enemy();
                        enemies.push(newEnemy);
                        score += 10;
                        i--;
                        break;
                    }
                }

                // 检查敌人是否撞到玩家
                if (checkCollision(player, enemy)) {
                    alert('游戏结束！得分: ' + score);
                    initGame();
                    return gameLoop();
                }
            }

            // 显示分数
            ctx.fillStyle = WHITE;
            ctx.font = '36px Arial';
            ctx.fillText('Score: ' + score, 10, 40);

            // 请求下一帧动画
            requestAnimationFrame(gameLoop);
        }

        // 初始化游戏并启动游戏循环
        initGame();
        gameLoop();
    </script>
</body>

</html>